<template>
  <basePage :show-tabbar="true" :page-params="pageParams" @testAgainFn="testAgainFn">
    <view class="fixed-topbar">
      <view class="topbar-con">
        <TopTabs
          :list-data="statusList"
          key-name="name"
          :current.sync="current"
          @tabClick="statusClick"
        />
      </view>
      <shopCar v-if="current == 0" ref="shopCar" :tab="true" :shipping-address-model="shippingAddressModel" />
      <shopCarCollect v-if="current == 1" ref="collect" @resetLoadMoreFn="resetLoadMoreFn" />
      <shopFrequentPurchase v-if="current == 2" ref="frequent" @resetLoadMoreFn="resetLoadMoreFn" />
      <view v-show="current != 0 && isLoadMore">
        <uni-load-more
          :status="loadStatus"
          :content-text="contentText"
          :icon-size="14"
        />
      </view>

    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import shopCar from '@/components/shopCar'
import TopTabs from '@/components/top-tabs';
import shopCarCollect from '@/purchaseOrder/shopCarCollect';
import shopFrequentPurchase from '@/purchaseOrder/shopFrequentPurchase';

export default {
  components: {
    shopCar,
    TopTabs,
    shopCarCollect,
    shopFrequentPurchase,
    basePage,

  },
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      shippingAddressModel: {},
      isshopCar: true,
      isCollect: false,
      current: 0,
      statusList: [
        {
          name: '购物车',
          code: [],
        },
        {
          name: '收藏',
          code: [10],
        },
        {
          name: '常购',
          code: [20],
        }
      ],
      page: 1,
      loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      contentText: {
        contentdown: '加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多了'
      },
    }
  },
  onLoad(option) {

  },
  onShow() {
  },
  //上拉触底函数
  onReachBottom() {
    if (!this.isLoadMore) {
      this.isLoadMore = true
      this.page += 1
      if (this.current == 1) {
        this.$refs['collect'] && this.$refs['collect'].initPageFn(this.page);
      } else if (this.current == 2) {
        this.$refs['frequent'] && this.$refs['frequent'].initPageFn(this.page);
      }
    }
  },
  methods: {
    statusClick(item) {
      this.page = 1
      if (this.current == 1) {
        this.resetLoadMoreFn({
          isLoadMore: false,
          loadStatus: '',
          page: 1
        })
        setTimeout(() => {
          this.$refs['collect'] && this.$refs['collect'].initPageFn(this.page);
        }, 1000);
      } else if (this.current == 2) {
        this.resetLoadMoreFn({
          isLoadMore: false,
          loadStatus: '',
          page: 1
        })
        setTimeout(() => {
          this.$refs['frequent'] && this.$refs['frequent'].initPageFn(this.page);
        }, 1000);
      }
    },
    resetLoadMoreFn(data) {
      this.loadStatus = data.loadStatus
      this.isLoadMore = data.isLoadMore
      this.page = data.page
    },
    //监听reFresh,如果有修改就执行监听器
    reFresh() {
      // 调初始化页面的接口
      this.$refs['shopCar'].getShopCarList();
      console.log('页面已重新加载');
    },
  }
}
</script>

<style lang="scss">
.fixed-topbar{
  .topbar-con{
    height: 88rpx;
    position: fixed;
    z-index: 99;
    width: 100%;
    /* #ifdef MP-WEIXIN || MP-ALIPAY */
    top:0;
    /* #endif */
    /* #ifdef H5 */
    top:88rpx;
    /* #endif */
  }
}
/deep/ .uni-swipe_button{
  text-align: center;
  width: 128rpx;
  padding: 0!important;
}
.shopCar{
  padding-top:152rpx;
}
</style>
